<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<%@ include file="/common-css.jsp" %>
<%@ include file="/common-js.jsp" %>
<body>
	<!-- 搜索区 -->
	<blockquote class="layui-elem-quote">
		<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		  <div class="layui-form-item">
		  	<div class="layui-inline">
		  		<label class="layui-form-label">角色名称</label>
			    <div class="layui-input-block">
			      <input type="text" name="name" value="${entity.name}" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
			    </div>
		  	</div>
		  	<div class="layui-inline">
		  		<label class="layui-form-label">创建时间</label>
			    <div class="layui-input-inline">
			      <input type="text" id="createTimeStart" name="createTimeStart" placeholder="请选择开始时间" class="layui-input">
			    </div>
			    <div class="layui-form-mid">-</div>
			    <div class="layui-input-inline" >
			      <input type="text" id="createTimeEnd" name="createTimeEnd" placeholder="请选择结束时间" class="layui-input">
			    </div>
		  	</div>
		  	<div class="layui-inline">
		  		<button class="layui-btn" lay-submit lay-filter="*">查询</button>
		  	</div>
		  </div>
		</form>
	</blockquote>
	<!-- 列表数据区 -->
	<table id="dataGrid" lay-filter="dataGrid"></table>
	<!-- 底部功能按钮区 -->
	<blockquote class="layui-elem-quote">
	  	<div class="layui-inline">
			<a class="layui-btn layui-btn-normal addBtn">添加</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-danger batchDelBtn">批量删除</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-normal roleGrentBtn">角色授权</a>
		</div>
	</blockquote>
</body>
<script type="text/html" id="bar">
  <a class="layui-btn layui-btn-sm" lay-event="detail"><i class="layui-icon">&#xe60a;</i>查看</a>
  <a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
<!-- 自定义的字段显示模板：可以存放在页面的任意位置 -->
<script type="text/html" id="statusTpl">
	{{# if(d.status == 0){ }}
		正常
	{{#}else if(d.status ==1){ }}
		停用
	{{#} }}
</script>

<script type="text/javascript">
layui.use(['form','table','layer','jquery','laydate'],function(){
	var table = layui.table;
	var layer = parent.layer === undefined ? layui.layer : parent.layer;
	var $ = layui.jquery;
	var laydate = layui.laydate;
	var form = layui.form;
	
	//渲染时间控件
	laydate.render({
		elem:"#createTimeStart" //指定一个元素
		,format:'yyyy-MM-dd HH:mm:ss'
		,theme: 'molv'
		,type: 'datetime'
	});
	laydate.render({
		elem:"#createTimeEnd" //指定一个元素
		,format:'yyyy-MM-dd HH:mm:ss'
		,theme: 'molv'
		,type: 'datetime'
	});
	
	//加载表单数据
	table.render({
		id:'dataGridTb',
		elem:'#dataGrid',
		url:'${pageContext.request.contextPath }/sys/sysRole/dataGrid',
		//method:'post',
		request:{
			pageName: 'page' //页码的参数名称，默认：page
  			,limitName: 'rows' //每页数据量的参数名，默认：limit
		},//如果无需自定义请求参数，可不加该参数
		response: {
			statusName: 'status' //数据状态的字段名称，默认：code
			,statusCode: 0 //成功的状态码，默认：0
			,msgName: 'msg' //状态信息的字段名称，默认：msg
		  	,countName: 'total' //数据总数的字段名称，默认：count
		  	,dataName: 'rows' //数据列表的字段名称，默认：data
		}, //如果无需自定义数据响应名称，可不加该参数
		initSort: {
    		field: 'seq' //排序字段，对应 cols 设定的各字段名
    		,type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
  		}
  		,even: true //开启隔行背景
		,page:true,
		cols:[[
			{field:'ck',type:'checkbox',width:'5%'},//复选框
			{field:'id',title:'ID',width:'15%',sort:true},
			{field:'createTime',title:'创建时间',width:'15%',sort:true},
			{field:'name',title:'角色名',width:'15%',sort:true},
			{field:'seq',title:'排序号',width:'8%',sort:true},
			{field:'description',title:'简介',width:'15%',sort:true},
			{field:'status',title:'状态',width:'7%',sort:true, templet:'#statusTpl'}, //这里的templet值是模板元素的选择器
			{fixed: 'right', title:'操作',width:'20%', minWidth:100, align:'center', toolbar: '#bar'} //这里的toolbar值是模板元素的选择器
		]]
	});
	
	//监听工具条
	table.on('tool(dataGrid)',function(obj){//注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		var data = obj.data; //获得当前行数据
  		var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  		//var tr = obj.tr; //获得当前行 tr 的DOM对象
  		//console.info(data);
  		if(layEvent == 'edit'){//编辑
  			openWinFull("编辑", "${pageContext.request.contextPath}/sys/sysRole/editPage?id="+data.id);
  		}else if(layEvent == 'del'){//删除
  			layer.confirm('确定要删除该记录吗？', {icon: 3, title:'提示'}, function(index){
				var pli = progressLoad();//加载提交等待提示窗口
				$.post('${pageContext.request.contextPath}/sys/sysRole/delete',{'id':data.id},function(ret){
					progressClose(pli);//关闭提交等待提示窗口
					ret = $.parseJSON(ret);
					if(ret.success){
						layer.msg(ret.msg);
						//重新加载页面
						location.reload();
					}else{
						layer.msg(ret.msg);
					}
				});				  
			});//layer.confirm('确定要批量删除被选中的记录吗？' End
  		}else if(layEvent == 'detail'){//查看
  			openWinFull("查看详情", "${pageContext.request.contextPath}/sys/sysRole/detailPage?id="+data.id);
  		}
	});
	
	//添加按钮
	$(".addBtn").click(function(){
		openWinFull("添加", "${pageContext.request.contextPath}/sys/sysRole/addPage");
	});
	
	//角色授权按钮
	$(".roleGrentBtn").click(function(){
		var checkStatus = table.checkStatus('dataGridTb'); //dataGridTb基础参数id对应的值
		var checkedId = '';
		if(checkStatus.data.length<=0){
			layer.msg("请先选择需要授权的角色");
		}else if(checkStatus.data.length>1){
			layer.msg("只能选择一个角色进行授权");
		}else{
			for(var i=0;i<checkStatus.data.length;i++){
				checkedId = checkStatus.data[i].id;
			}
			openWinFull("角色授权", "${pageContext.request.contextPath}/sys/sysRole/grantPage?id="+checkedId);
		}
	});
	
	//批量删除按钮
	$(".batchDelBtn").click(function(){
		var checkStatus = table.checkStatus('dataGridTb'); //dataGridTb基础参数id对应的值
		//console.info(checkStatus.data); //获取选中行的数据
		var checkIds = "";
		for(var i=0;i<checkStatus.data.length;i++){
			checkIds += checkStatus.data[i].id +",";
		}
		if(checkStatus.data.length>0){
			layer.confirm('确定要批量删除被选中的记录吗？', {icon: 3, title:'提示'}, function(index){
				var pli = progressLoad();//加载提交等待提示窗口
				$.post('${pageContext.request.contextPath}/sys/sysRole/batchDelete',{'ids':checkIds},function(ret){
					progressClose(pli);//关闭提交等待提示窗口
					ret = $.parseJSON(ret);
					if(ret.success){
						layer.msg(ret.msg);
						location.reload();//重新加载页面
					}else{
						layer.msg(ret.msg);
					}
				});				  
			});//layer.confirm('确定要批量删除被选中的记录吗？' End
		}else{
			layer.msg("请选择要删除的记录!");
		}
	});
	
	//打开一个填充主主区域的窗口
	function openWinFull(title,pageUrl){
		var index = layui.layer.open({
			title : title,
			type : 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
			content : pageUrl,//这里content是一个普通的String,或者jsp路径
			success : function(layero, index){
				setTimeout(function(){
					layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
						tips: 3
					});
				},500);
			}
		});
		//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
		$(window).resize(function(){
			layui.layer.full(index);
		});
		layui.layer.full(index);
	}
	
	//搜索表单
	form.on('submit(*)',function(data){
// 		console.info(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
		//重新加载数据
		table.reload('dataGridTb',{
			url:'${pageContext.request.contextPath }/sys/sysRole/dataGrid',
			where:data.field, // 查询条件
			request:{
				pageName: 'page' //页码的参数名称，默认：page
	  			,limitName: 'rows' //每页数据量的参数名，默认：limit
			},//如果无需自定义请求参数，可不加该参数
			response: {
				statusName: 'status' //数据状态的字段名称，默认：code
				,statusCode: 0 //成功的状态码，默认：0
				,msgName: 'msg' //状态信息的字段名称，默认：msg
			  	,countName: 'total' //数据总数的字段名称，默认：count
			  	,dataName: 'rows' //数据列表的字段名称，默认：data
			}, //如果无需自定义数据响应名称，可不加该参数
			initSort: {
	    		field: 'seq' //排序字段，对应 cols 设定的各字段名
	    		,type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
	  		}
	  		,even: true //开启隔行背景
			,page:true,
			cols:[[
				{field:'ck',type:'checkbox',width:'5%'},//复选框
				{field:'id',title:'ID',width:'15%',sort:true},
				{field:'createTime',title:'创建时间',width:'15%',sort:true},
				{field:'name',title:'角色名',width:'15%',sort:true},
				{field:'seq',title:'排序号',width:'8%',sort:true},
				{field:'description',title:'简介',width:'15%',sort:true},
				{field:'status',title:'状态',width:'7%',sort:true, templet:'#statusTpl'}, //这里的templet值是模板元素的选择器
				{fixed: 'right', title:'操作',width:'20%', minWidth:100, align:'center', toolbar: '#bar'} //这里的toolbar值是模板元素的选择器
			]]
		});
		
		return false;
	});
	
});
</script>
</html>